<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table{
    border: 1px solid #ccc;
    border-collapse: collapse;
}
.table td,.table th{
    border: 1px solid #ccc;
    padding: 5px 10px;
}
</style>
</head>
<body>
    
<h1>用户列表</h1>
<table class="table">
    <tr>
        <th>账号</th>
        <th>昵称</th>
        <th>密码</th>
        <th>邮箱</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <!-- <tr>
        <td>xiaocuo</td>
        <td>小错</td>
        <td>123123</td>
        <td>123456789@qq.com</td>
        <td>男</td>
        <td>18</td>
    </tr> -->
</table>

<script src="./utils.js"></script>
<script>
// 前端渲染
// 是指由后端返回页面数据，前端完成页面html结构拼接的页面处理技术

// 前端渲染的特征：
// 1.数据传输量小，传输速度快
// 2.前后端分离，各司其职，效率更高
// 3.减少占用服务器运算资源，占用更多客户端运算资源
// 4.对SEO搜索引擎优化不友好，页面中会大量使用ajax请求数据，搜索引擎抓取不到ajax数据


// 发送请求，获取用户数据
ajax({
    type: 'get',
    url: 'http://localhost:9999/users/getusers',
    dataType: 'json',
    cache: false
})
.then((json)=>{
    console.log( json );

    // 模板
    let tmp = `<tr>
                <th>账号</th>
                <th>昵称</th>
                <th>密码</th>
                <th>邮箱</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>`;

    // 遍历拼接模板
    json.data.forEach(item=>{
        tmp += `<tr>
                <td>${item.username}</td>
                <td>${item.nickname}</td>
                <td>${item.password}</td>
                <td>${item.email}</td>
                <td>${item.sex}</td>
                <td>${item.age}</td>
            </tr>`;
    });

    // 添加到table中
    $('.table').innerHTML = tmp;
})
.catch((err)=>{
    alert('暂无数据！')
})

</script>
</body>
</html>